/*
 * @Author: xiaosihan 
 * @Date: 2023-08-19 14:00:59 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:40:24
 */



import designEditor from "@/editorComponent/designEditor";
import fontManage from "@/myFabric/fontManage";
import { PlusOutlined } from "@ant-design/icons";
import { TextOptions } from "fabric/fabric-impl";
import { autorun } from "mobx";
import { useEffect } from "react";
import styles from "./text.module.less";

interface Iprops {
  onClick?: (text: string, option: TextOptions) => void;
}

// 文字
export default function Text(props: Iprops) {

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {

  }), []);

  return (
    <div className={styles.text} >
      <div
        className={styles.addText}
        onClick={() => {
          fontManage.loadFont([fontManage.fontlist[0].id]);
          if (props.onClick) {
            props.onClick("双击编辑", { fontFamily: fontManage.fontlist[0].id });
          } else {
            designEditor.addText("双击编辑", { fontFamily: fontManage.fontlist[0].id });
          }

        }}>
        <PlusOutlined />
        &nbsp;&nbsp;
        <span>添加文字</span>
      </div>
      {/* {
                fontManage.fontlist.map((font, i) => {
                    return <TextItem
                        key={font.id}
                        id={font.id}
                        img={font.img}
                        onClick={props.onClick}
                    />
                })
            } */}
    </div>
  );

}